<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{$system_info['title']}</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/layer/2.3/skin/layer.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="think-app">
    <div id="app">
        <template id="appcnt">
            <el-container class="think-container">
                <el-aside class="think-aside">
                    <el-menu
                            default-active="apps"
                            class="think-el-menu"
                            background-color="#2a68c9"
                            text-color="#d7e6fe"
                            active-text-color="#ffd04b"
                            @select="handleSelect"
                            :collapse="isCollapse">

                        <el-menu-item index="collapse"
                                      style="padding: 0; height: 12px; font-size: 0px;background: rgb(34, 83, 161);">
                            展开
                        </el-menu-item>
                        <el-menu-item style="padding: 5px; text-align: center;">
                            <a href="{:url('/thinkadmin/main/index')}">
                                <img class="menu-logo" src="{$system_info['logo']}" alt="">
                            </a>
                        </el-menu-item>
                        <el-menu-item index="apps">
                            <i class="el-icon-star-on"></i>
                            <span slot="title">应用</span>
                        </el-menu-item>


                        <template v-for="(menu, index) in menus">
                            <el-menu-item :index="index" v-if="!menu.child" @click="openUrl(menu.uri, menu.title)">
                                <i :class="menu.icon"></i>
                                <span slot="title">{{menu.title}}</span>
                            </el-menu-item>

                            <el-submenu :index="index" v-if="menu.child">
                                <template slot="title">
                                    <i :class="menu.icon"></i>
                                    <span>{{menu.title}}</span>
                                </template>

                                <template v-for="(child, childIndex) in menu.child">
                                    <el-menu-item :index="childIndex" @click="openUrl(child.uri, child.title)"
                                                  v-if="!child.child">{{child.title}}
                                    </el-menu-item>
                                    <el-submenu :index="childIndex" v-if="child.child">
                                        <template slot="title">{{child.title}}</template>
                                        <el-menu-item :index="childSecIndex"
                                                      @click="openUrl(childSec.uri, childSec.title)"
                                                      v-for="(childSec, childSecIndex) in child.child">
                                            {{childSec.title}}
                                        </el-menu-item>
                                    </el-submenu>
                                </template>
                            </el-submenu>
                        </template>

                        <div class="menu-bottom">
                            <el-menu-item @click="openUrl('{:url('/thinkadmin/main/message')}', '消息')">
                                <i class="el-icon-chat-line-square"></i>
                                <span slot="title">消息</span>
                            </el-menu-item>
                            <el-menu-item>
                                <el-popover
                                        style="z-index: 999999998"
                                        width="114"
                                        placement="right"
                                        trigger="hover"
                                >
                                    <div class="my-settings">
                                        <li @click="openUrl('{:url('/thinkadmin/my/index')}', '个人设置')"><i
                                                class="el-icon-user"></i> 个人设置
                                        </li>
                                        {if $admin->isSupper()}
                                        <li @click="openUrl('{:url('/thinkadmin/system/index')}', '系统设置')"><i
                                                class="el-icon-setting"></i> 系统设置
                                        </li>
                                        {/if}
                                        <li><a href="{:url('/thinkadmin/auth/logout')}"><i class="el-icon-right"></i>
                                            退出登录</a></li>
                                    </div>
                                    <div slot="reference">
                                        <i class="el-icon-s-custom"></i>
                                    </div>

                                </el-popover>
                            </el-menu-item>
                        </div>
                    </el-menu>
                </el-aside>
                <el-main>
                    <div style="text-align: center; margin: 300px auto; width: 500px;">
                        <h1>欢迎登录 think-admin</h1>
                        <div style="color: #666666">
                            <p>不要问我</p>
                            <p>一生曾经爱过多少人</p>
                            <p>你不懂我伤有多深</p>
                            <p>要剥开伤口总是很残忍</p>
                            <p>劝你别做痴心人</p>
                            <p>多情暂且保留几分</p>
                            <p>...</p>

                        </div>
                        <el-alert
                                title="开发版，暴躁的码农正在不慌不忙的开发中....."
                                type="error">
                        </el-alert>
                    </div>
                </el-main>
                <el-drawer
                        z-index="999999999"
                        :modal="falseSetting"
                        class="apps-drawer"
                        title="应用"
                        size="400px"
                        :visible.sync="drawer"
                        :direction="direction"
                        :before-close="handleClose">
                    <el-row>
                        <div class="think-apps">
                            <el-col :span="6" v-for="n in apps">
                                <span @click="openUrl(n.entry, n.title)">
                                    <img :src="n.image" alt="">
                                    <span class="icon-name">{{n.title}}</span></span>
                            </el-col>
                        </div>
                    </el-row>
                </el-drawer>
            </el-container>
        </template>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>

<script>
    new Vue({
        el: '#app',
        template: "#appcnt",
        data: function () {
            return {
                apps: [],
                menus: [],
                isCollapse: true,
                falseSetting: false,
                drawer: false,
                direction: 'ltr'
            }
        },
        methods: {
            openUrl(url, title) {
                this.drawer = false
                var width = document.body.clientWidth;
                var height = document.body.clientHeight - 40;
                var maxWidth = 1400
                width = width > maxWidth ? maxWidth : width - 140
                layer.open({
                    type: 2,
                    title: title,
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: [width + 'px', height + 'px'],
                    content: url,
                    zIndex: layer.zIndex,
                    success: function (layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            },
            handleCollapse() {
                this.isCollapse = this.isCollapse ? false : true
                console.log(this.isCollapse)
            },
            handleClose(key, keyPath) {
                this.drawer = false
                console.log(key, keyPath);
            },
            handleSelect(key, keyPath) {
                this.drawer = false
                if (key === 'apps') {
                    this.drawer = !this.drawer
                } else if (key === 'collapse') {
                    this.isCollapse = this.isCollapse ? false : true
                }
                console.log(key, keyPath);
            },
            getMyApps() {
                let _this = this
                $.getJSON("{:url('/thinkadmin/main/getMyApps')}", function (rs) {
                    if (rs.code !== 200) {
                        return false;
                    }
                    _this.apps = rs.data
                })
            },
            getMyMenus() {
                let _this = this
                $.getJSON("{:url('/thinkadmin/main/getMyMenus')}", function (rs) {
                    if (rs.code !== 200) {
                        return false;
                    }
                    _this.menus = rs.data
                    if (rs.data.length > 13) {
                        $(".menu-bottom").css('position', 'unset');
                    }
                })
            }
        },
        created: function () {
            this.getMyMenus()
            this.getMyApps()
            this.$notify({
                title: '欢迎访问',
                message: '不要问我，一生爱过多少人',
                position: 'bottom-right'
            });
        }
    })
</script>
<style>
    body, .think-app, html {
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .think-app .think-aside {
        overflow: unset;
    }

    .think-app .el-main {
        padding: 0;
    }

    .think-app .think-container,
    .think-app .think-container .think-aside,
    .think-app .think-container .think-el-menu {
        height: 100%;
    }

    .apps-drawer .el-drawer.ltr {
        left: 64px;
    }


    .think-el-menu .menu-logo {
        width: 45px;
        height: 45px;
    }


    .think-el-menu .menu-bottom {
        position: absolute;
        bottom: 20px;
        display: block;
        width: 100%;
    }

    .think-el-menu i {
        color: #d7e6fe;
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
        vertical-align: middle;
    }

    .el-menu--collapse > .el-menu-item i, .el-menu--collapse > .el-submenu i {
        color: #d7e6fe;
        speak: none;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        margin: 0;
        vertical-align: middle;
        width: 24px;
        text-align: center;
    }

    .my-settings li {
        list-style-type: none;
    }

    .my-settings li a {
        color: #666;
        line-height: 37px;
        text-decoration: none;
    }

    .my-settings li {
        cursor: pointer;
        color: #666;
        line-height: 37px;
        padding-left: 20px;
        text-decoration: none;
    }

    .my-settings li a:hover {
        color: #4f90f7
    }

    .think-apps {
        text-align: center;
        color: #5e6d82;
        font-size: 14px;
        line-height: 2em;
    }

    .think-apps > .el-col {
        height: 100px;
        cursor: pointer;
    }

    .think-apps img {
        display: block;
        width: 48px;
        height: 48px;
        margin: 0 auto;
    }

</style>
</html>